<!--
 * @Author: your name
 * @Date: 2020-11-05 11:19:53
 * @LastEditTime: 2021-01-06 16:13:32
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edi
 * @FilePath: \sende_nuxt\components\productDetail\detail.vue
-->
<template>
  <div class="detail">
    <el-tabs type="border-card" v-model="curTabVal" @tab-click="handleClick">
        <el-tab-pane name="Detail">
            <span slot="label">{{$t('Detail')}}</span>
            <div class="detail_one ptb20 plr20">
                <ul class="title ptb10 mb20">
                    <li class="li">{{$t('Specifications')}}</li>
                    <li class="li">{{$t('Frame size')}}</li>
                </ul>
                <div class="content">
                    <div class="content_left">
                        <div class="txt">{{$t('SKU')}}: EYE9099</div>
                        <div class="txt">{{$t('Rim')}}: Full</div>
                        <div class="txt">{{$t('Gender')}}: Women</div>
                        <div class="txt">{{$t('Shape')}}: Round</div>
                        <div class="txt">{{$t('Color')}}:&nbsp;Brown/Red/Black</div>
                        <div class="txt">{{$t('Prescription Range')}}:&nbsp;-100.00 ~ +1000.00</div>
                        <div class="txt">{{$t('Material')}}:&nbsp;Acetate</div>
                        <div class="txt">{{$t('Feature')}}:&nbsp;Metal&nbsp;spring&nbsp;hinge,Acetate&nbsp;frame</div>
                        <div class="txt">{{$t('Lens&nbsp;type')}}:Classic&nbsp;clear,Blueblocking,Photochromic,Polarized</div>
                        <div class="txt">{{$t('Prescription&nbsp;type')}}:&nbsp;Single-vision,Progressives,Non-prescription,Readers</div>
                    </div>
                    <div class="content_right">
                        <div class="txt">
                            <img class="img" :src="require('@/assets/image/testConfig.jpg')" alt="">
                            <span class="ml10">Frame Wdith: 135mm</span>
                        </div>
                        <div class="txt">
                            <img class="img" :src="require('@/assets/image/testConfig.jpg')" alt="">
                            <span class="ml10">Lens Width: 52mm</span>
                        </div>
                        <div class="txt">
                            <img class="img" :src="require('@/assets/image/testConfig.jpg')" alt="">
                            <span class="ml10">Lens Height: 39mm</span>
                        </div>
                        <div class="txt">
                            <img class="img" :src="require('@/assets/image/testConfig.jpg')" alt="">
                            <span class="ml10">Temple Length: 140mm</span>
                        </div>
                        <div class="txt">
                            <img class="img" :src="require('@/assets/image/testConfig.jpg')" alt="">
                            <span class="ml10">Bridge: 22mm</span>
                        </div>
                        <div class="txt">
                            <img class="img" :src="require('@/assets/image/testConfig.jpg')" alt="">
                            <span class="ml10">Weight: 22grams</span>
                        </div>
                    </div>
                </div>
            </div>
        </el-tab-pane>
        <el-tab-pane name="Review">
            <span slot="label">{{$t('Review')}}</span>
            <div class="detail_two">
                <ul class="ul" v-if="testData.length">
                    <li class="comments ptb20 plr20"  v-for="(comment, index) of testData" :key="'comment' + index">
                        <div class="comments_left">
                            <div class="rate mb10">
                                <el-rate :value="comment.score" disabled :colors="['#3bb5ec', '#3bb5ec', '#3bb5ec']" class="score"></el-rate>
                                <span class="title ml10">Love these</span>
                            </div>
                            <div class="name mb10">By {{comment.name}}</div>
                            <div class="date mb10">August 29, 2020</div>
                            <div class="color mb20">Color: {{comment.color}}</div>
                            <p class="comment mb10">{{comment.content}}</p>
                            <div class="help">
                                <div class="btn ptb10 plr20 mr30" @click="helpful(index)">Helpful</div>
                                <div class="isBtn" ref="isHelp">
                                    <span class="isBtn_yes" @click="sendeHelp(comment, 'yes')">Yes&nbsp;/</span>&nbsp;
                                    <span class="isBtn_no" @click="sendeHelp(comment, 'no')">No</span>
                                    <span class="txt ml10">{{comment.helpCount}} people found this helpful</span>
                                </div>
                            </div>
                        </div>
                        <div class="comments_right">
                            <img class="img" :src="comment.commentImg" alt="">
                        </div>
                    </li>
                </ul>
                <div class="writeComment">
                    <div class="write_btn ptb10 plr20" @click="writeComment()">Write a customer review</div>
                    <div class="comment_arrow">
                        <span class="arrow_left mr10" @click="commentPrev()" :class="{isPage:curPage === 1}"><i class="iconfont icon-angle-left"></i></span>
                        <span class="arrow_num">{{curPage}}&nbsp;{{$t('of')}}&nbsp;{{commentTotal}}</span>
                        <span class="arrow_right ml10" @click="commentNext()" :class="{isPage:curPage === commentTotal}"><i class="iconfont icon-angle-right" ></i></span>
                    </div>
                </div>
            </div>
        </el-tab-pane>
        <el-tab-pane name="AnsweredQuestion">
            <span slot="label">{{$t('Answeres questionn')}}</span>
            <div class="mt20">
                <div class="askAbout mb20">
                    <input type="text" v-model="askVal" class='askAbout_val plr10 ptb10 mr10' placeholder="What do you want to know?  Frame, lens, shipping time, secure payment......Please post your question">
                    <div class="askAbout_btn" @click="sendAskVal()">Ask about this product</div>
                </div>
                <ul class="plr10">
                    <li class="li mb20">
                        <div class="li_question mb10">Question: <span class="question">When will I receive my order?</span></div>
                        <div class="li_answer mb10">Answer: <span class="answer">6 days after the purchase of the prescription order</span></div>
                    </li>
                    <li class="li mb20">
                        <div class="li_question mb10">Question: <span class="question">When will I receive my order?</span></div>
                        <div class="li_answer mb10">Answer: <span class="answer">6 days after the purchase of the prescription order</span></div>
                    </li>
                    <li class="li mb20">
                        <div class="li_question mb10">Question: <span class="question">When will I receive my order?</span></div>
                        <div class="li_answer mb10">Answer: <span class="answer">6 days after the purchase of the prescription order</span></div>
                    </li>
                    <li class="li mt30" @click="loadMoreQuestion()">
                        <span class="li_more ptb10 plr30" v-if="questionPage < questionTotal">{{$t('See more answers to the questions')}}</span>
                        <span v-else>{{$t('No Data')}}</span>
                    </li>
                </ul>
            </div>
        </el-tab-pane>
    </el-tabs>
    <CommentSubmit :commentActive="commentActive" @closeActive="closeActive"/>
  </div>
</template>

<script>
import CommentSubmit from './CommentSubmit'
import { mapMutations } from 'vuex';
export default {
    name: 'Detail',
    data() {
        return {
            score: 5, // 分数
            isHelpful: false, // 是否显示认同数据
            currentIndex: 0, // 当前评论索引
            testData: [
                {
                  id: 1
                  ,score: 5
                  ,name: 'Grace'
                  ,color: 'Brown'
                  ,content: ' Comfy and casual glasses! They do get a little bit loose the more you wear them but it isn’t anything that makes me dislike the glasses and it isn’t super noticeable! So excited to keep wearing these!'
                  ,helpCount: 9
                  ,commentImg: require('@/assets/image/comment_img.jpg')
                },
                {
                  id: 2
                  ,score: 4
                  ,name: 'Wang'
                  ,color: 'Brown'
                  ,content: ' Comfy and casual glasses! They do get a little bit loose the more you wear them but it isn’t anything that makes me dislike the glasses and it isn’t super noticeable! So excited to keep wearing these!'
                  ,helpCount: 9
                  ,commentImg: require('@/assets/image/comment_img.jpg')
                }
            ], // 测试数据
            commentTotal: 2, // 评论列表总页
            curPage: 1, // 评论列表当前页
            commentActive: false, // 是否显示评论表单
            askVal: '', // 问答
            questionPage: 1, // 问答列表当前页
            questionTotal: 2, // 问答列表总页
            curTabVal: 'Detail'
        }
    },
    components: {
        CommentSubmit
    },
    computed: {
        tabsVale() {
            return this.$store.state.content.tabsValue
        }
    },
    watch: {
        tabsVale(newval, oldval) {
            this.curTabVal = newval;
        }
    },
    methods: {
        ...mapMutations('content', ['SET_QUESTION']),
        handleClick(tab, event) {
            this.SET_QUESTION(tab.name);
        },
        /*
         *@functionName: 
         *@params: 
         *@description:
         *@author: Mister Wang
         *@date: 2020-11-09 15:13:33
         *@version: V1.0.0
        */
       loadMoreQuestion() {
           if (this.questionPage < this.questionTotal) {
               this.questionPage++;
               console.log('执行请求 :>> ');
           }
       },
        /*
         *@functionName: 
         *@params: 
         *@description:
         *@author: Mister Wang
         *@date: 2020-11-09 15:06:53
         *@version: V1.0.0
        */
       sendAskVal() {
           if (this.askVal) {
               console.log('this.askVal :>> ', this.askVal);
           } else {
                this.$message({
                    message: this.$t('please write ask question'),
                    type: 'warning',
                    center: true
                });   
           }
       },
        /*
         *@functionName: helpful
         *@params: index>>当前评论的索引
         *@description: 显示认同信息
         *@author: Mister Wang
         *@date: 2020-11-09 15:02:38
         *@version: V1.0.0
        */
        helpful(index) {
            if (this.$refs.isHelp[index].style.display) {
                this.$refs.isHelp[index].style.display = '';
            } else {
                this.$refs.isHelp[index].style.display = 'block';
            }
        },
        /*
         *@functionName: sendeHelp
         *@params1: value >> 评论单元
         *@params2: choose >> yes或no
         *@description:
         *@author: Mister Wang
         *@date: 2020-11-09 10:36:10
         *@version: V1.0.5
        */
        sendeHelp(value, choose) {
            if (choose === 'yes') {
                console.log('yes :>> ', value);
                this.$message({
                    message: 'Thanks for your comments!',
                    type: 'success',
                    center: true
                });
            } else {
                console.log('no :>> ', value);
            }
        },
        /*
         *@functionName:commentPrev
         *@params: 
         *@description: 上一页
         *@author: Mister Wang
         *@date: 2020-11-09 10:46:30
         *@version: V1.0.0
        */
        commentPrev() {
            if (this.curPage === 1) return;
            this.curPage--;
            console.log('commentPrev :>> ', this.curPage);
        },
        /*
         *@functionName: commentNext
         *@params: 
         *@description: 下一页
         *@author: Mister Wang
         *@date: 2020-11-09 10:47:56
         *@version: V1.0.0
        */
        commentNext() {
            if (this.curPage === this.commentTotal) return;
            this.curPage++;
            console.log('commentNext :>> ', this.curPage);
        },
        /*
         *@functionName: 
         *@params: 
         *@description: 显示评论表单
         *@author: Mister Wang
         *@date: 2020-11-09 11:13:37
         *@version: V1.0.0
        */
        writeComment() {
            this.commentActive = true;
        },
        closeActive() {
            this.commentActive = false;
        }
    }
}
</script>
<style>

.commentRuleForm .el-rate {
    line-height: unset;
}
.commentRuleForm .el-rate__item {
    vertical-align: unset;
}
.commentRuleForm .el-rate__icon {
    font-size: 24px;
    line-height: unset;
}
.commentRuleForm .el-dialog__header {
    padding: 0;
}
.commentRuleForm .el-form-item:last-child {
    margin-bottom: 0;
}
</style>
<style lang="scss" scoped>
@import "~/assets/scss/index.scss";
.detail {
    &_box {
        padding: 0;
    }
}
.detail_one {
    background: $bgc-title;
    .title {
        @include flex-center(space-between);
        .li {
            width: 50%;
            font-size: 14px;
            font-weight: bold;
            color: $c333;
        }
    }
}
.content {
    @include flex();
    &_right,
    &_left{
        width: 50%;
        @include flex();
        flex-wrap: wrap;
    }
    .txt {
        @include multiline-ellipsis(2);
        width: 50%;
        font-size:12px;
        font-weight: bold;
        margin-bottom: 15px;
        line-height: 1.5;
        .img {
            width:80px;
            height: 28px;
        }
    }
}
.detail_two {
    .ul {
        margin-bottom: 15px;
    }
}
.comments {
    @include flex-center(space-between);
    border: 1px solid $ddd;
    border-top: 1px solid transparent;
    &_left {
        width: 60%;
        .color,
        .date,
        .name,
        .title {
            @include ellipsis();
            font-size: 14px;
            font-weight: bold;
        }
        .rate {
            @include flex-center(flex-start);
        }
        .comment {
            line-height: 1.5;
            font-size: 12px;
            font-weight: bold;
        }
        .help {
            @include flex-center(flex-start);
            .btn {
                cursor: pointer;
                font-size: 12px;
                font-weight: bold;
                border: 1px solid $ceb;
                background: $bgc-title;
            }
            .isBtn {
                display:none;
            }
            .isBtn_yes,
            .isBtn_no {
                color: $theme;
                font-weight: bold;
                font-size: 12px;
                cursor: pointer;
            }
            .txt {
                color: $c666;
                font-size: 12px;
                font-weight: bold;
            }
        }
    }
    &_right {
        width: 250px;
        .img {
            width: 100%;
        }
    }
}
.writeComment {
    @include flex-center(space-between);
    .write_btn {
        font-size: 12px;
        color: $c333;
        text-align: center;
        background: $bgc-title;
        border: 1px solid $ddd;
        cursor: pointer;
    }
    .arrow_right,
    .arrow_left,
    .arrow_num {
        font-size: 16px;
        color: $theme;
    }
    .arrow_right,
    .arrow_left {
        cursor: pointer;
    }
}
.askAbout {
    @include flex-center(space-between);
    &_val {
        flex-grow: 1;
        border: 1px solid $ddd;
        box-sizing: border-box;
        font-size: 12px;
        height:40px;
    }
    &_btn {
        width: 140px;
        font-size:12px;
        padding-left: 5px;
        padding-right: 5px;
        background: $bgc-title;
        border: 1px solid $ddd;
        height: 40px;
        line-height: 40px;
        text-align: center;
        box-sizing: border-box;
        cursor: pointer;
    }
}
.li_more,
.answer,
.question {
    font-size: 12px;
    font-weight: bold;
    color: $c333;
}
.question{
    color: $theme;
 }
.li_more{
    font-size: 12px;
    color: $c333;
    text-align: center;
    background: $bgc-title;
    border: 1px solid $ddd;
    display: inline-block;
    cursor: pointer;
}
.isPage {color: rgba(64,158,255, .4) !important;}
</style>
